var React = require('react');
var ModalDialog = require('../../common/component/dialog/modal-dialog.node');
var ModalBody = require('../../common/component/dialog/modal-body.node');
var ModalFooter = require('../../common/component/dialog/modal-footer.node');

module.exports = function NewMenuDialog(props) {

  return (
    <ModalDialog dialogTitle="${t('ui.menu.common.dialog.newMenu')}">
      <ModalBody>
        <form>
          <input type="hidden" id="templateId" name="templateId" data-x-name="new.templateId" />
          <input type="hidden" id="parentId" name="parentId" data-x-name="new.parentId" />

          {/* 菜单代码 */}
          <div className="form-group x-form-required">
            <label htmlFor="menuCode">{"${t('ui.menu.common.field.menuCode')}"}</label>
            <input type="text" className="form-control" id="menuCode" name="menuCode" data-x-name="new.menuCode"
              placeholder={"${t('ui.system.common.placeholder.inputCodeLimitLength', 1, 50)}"} />
          </div>

          {/* 菜单名称 */}
          <div className="form-group x-form-required">
            <label htmlFor="menuName">{"${t('ui.menu.common.field.menuName')}"}</label>
            <input type="text" className="form-control" id="menuName" name="menuName" data-x-name="new.menuName"
              placeholder={"${t('ui.system.common.placeholder.inputTextLimitLength', 1, 20)}"} />
          </div>

          {/* 上级菜单 */}
          <div className="form-group">
            <label htmlFor="parentName">{"${t('ui.menu.common.field.parentName')}"}</label>
            <input type="text" className="form-control" id="parentName" name="parentName" data-x-name="new.parentName" disabled />
          </div>

          {/* 菜单图标 */}
          <div className="form-group">
            <label htmlFor="menuIcon">{"${t('ui.menu.common.field.menuIcon')}"}</label>
            <input type="text" className="form-control" id="menuIcon" name="menuIcon" data-x-name="new.menuIcon"
              placeholder={"${t('ui.system.common.placeholder.inputTextLimitLength', 0, 50)}"} />
          </div>

          {/* 菜单路径 */}
          <div className="form-group x-form-required">
            <label htmlFor="menuPath">{"${t('ui.menu.common.field.menuPath')}"}</label>
            <input type="text" className="form-control" id="menuPath" name="menuPath" data-x-name="new.menuPath"
              placeholder={"${t('ui.system.common.placeholder.inputTextLimitLength', 1, 500)}"} />
          </div>

          {/* 菜单序号 */}
          <div className="form-group x-form-required">
            <label htmlFor="menuOrder">{"${t('ui.menu.common.field.menuOrder')}"}</label>
            <input type="text" className="form-control" id="menuOrder" name="menuOrder" data-x-name="new.menuOrder"
              placeholder={"${t('ui.system.common.placeholder.inputDigits')}"} />
          </div>

          {/* 是否显示 */}
          <div className="form-group x-form-required">
            <label htmlFor="showFlag">{"${t('ui.system.common.field.showFlag')}"}</label>
            <select className="form-control" id="showFlag" name="showFlag" data-x-name="new.showFlag"
              defaultValue="true">
              <option value="true">{"${t('ui.system.common.option.showFlag.true')}"}</option>
              <option value="false">{"${t('ui.system.common.option.showFlag.false')}"}</option>
            </select>
          </div>

          {/* 备注 */}
          <div className="form-group">
            <label htmlFor="remark">{"${t('ui.system.common.field.remark')}"}</label>
            <input type="text" className="form-control" id="remark" name="remark" data-x-name="new.remark"
              placeholder={"${t('ui.system.common.placeholder.inputTextLimitLength', 0, 200)}"} />
          </div>

        </form>
      </ModalBody>
      <ModalFooter confirmLabel="${t('ui.system.common.btn.save')}" cancelLabel="${t('ui.system.common.btn.cancel')}" />
    </ModalDialog>
  )
};
